body{ background-color: #d5433d; }
body .container{ padding:0 0.65rem; }
body .head{ padding:0.5rem 0; height:1rem; line-height:1rem; font-size:0.5rem; text-align:center; color:#fff; position:relative; }
body .head .icon-jiantou1{ font-weight:bold; font-size:0.8rem; position:absolute; left:0; }
body .head h2{ display:inline-block; font-size:0.8rem; }
body .head .nav{ position:absolute; font-size:0.6rem; right:0; top:0.52rem; background-color:#fff; padding:0.04rem 0.1rem; border-radius:0.15rem; }
body .head .nav a{ float:left; color:#d5433d; width:1.7rem; }
body .head .nav a.active{ background-color:#d5433d; color:#fff; border-radius:0.15rem; }

#communication .content{ background-color:#fff; border-radius:0.45rem; font-size:0.3rem; margin-top:0.2rem; }
#communication .content input{ width:97%; border:none; height:1.5rem; margin:1.5%; border-radius:0.2rem; font-size:0.6rem; text-align:center; background:#f5f5f5 url("../images/search.png") no-repeat 20%; position:relative; }
#communication .content input:focus{ background-color:#f5f5f5; outline:none; }
#communication .content .list-box-container{ background-color:#f6f6f6; position:relative; border-radius:0 0 0.45rem 0.45rem; }
#communication .content-org .list-box-container{ padding:1rem 0 1.6rem; }
#communication .content-org .list-box{ height:19.4rem; background-color:#fff; overflow-y:scroll; }
#communication .content-org .content-container{ border-bottom:1px solid #e8e8e8; }
#communication .content-org .list-box .head{ padding:0.5rem; }
#communication .content-org .list-box .head .title i{ color:#adadad; font-size:0.6rem; display:inline-block; transform:rotate(-90deg); -webkit-transform:rotate(-90deg); transition:all 0.5s ease-out; -webkit-transition:all 0.5s ease-out; }
#communication .content-org .list-box .head .title i.active{ transform:rotate(0deg); -webkit-transform:rotate(0deg); }
#communication .content-org .list-box .head .title span{ color:#2e2e2e; font-size:0.7rem; margin-left:0.2rem; }
#communication .content-org .list-box .head .title em{ color:#535353; font-size:0.2rem; margin-left:0.2rem; }
#communication .content-org .list-box .head .icon-list i{ color:#909090; margin-left:0.5rem; font-size:1.9em; }
#communication .content-org .list-box .head .icon-list i.active{ color:#d5433d; }
#communication .content-org .list-box .main{ padding-left:0.6rem; }
#communication .content-org .list-box .main ul li{ overflow:hidden; padding-top:0.5rem; }
#communication .content-org .list-box .main ul li img{ float:left; width:1.5rem; height:1.5rem; border-radius:50%; }
#communication .content-org .list-box .main ul li .outer{ float:left; width:85%; margin-left:0.5rem; padding-bottom:0.5rem; height:1.5rem; border-bottom:1px solid #e8e8e8; }
#communication .content-org .list-box .main ul li:last-child .outer{ border:none; }
#communication .content-org .list-box .main ul li .inner-top{ font-size:0.7rem; line-height:0.6rem; }
#communication .content-org .list-box .main ul li .inner-top i{ color:#c8c8c8; padding:0 0.4rem; font-size:1rem; }
#communication .content-org .list-box .main ul li .inner-top i.active{ color:#d5433d; }
#communication .content-org .list-box .main ul li .inner-top span{ font-size:0.7rem; display:inline-block; width:4.1rem; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
#communication .content-org .list-box .main ul li .inner-bottom{ font-size:0.57rem; color:#5d5d5d; margin-top:0.4rem; width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }

#communication .content-personal .list-box-container{ padding-top:0.5rem; }
#communication .content-personal .content-head{ padding:0.4rem 0; overflow:hidden; height:1rem; background-color:#fff; }
#communication .content-personal .content-head .kind li{ float:left; border-right:1px solid #e1e1e1; font-size:0.6rem; padding:0.1rem 0; width:24.7%; text-align:center; color:#999; }
#communication .content-personal .content-head .kind li:last-child{ border:none; }
#communication .content-personal .content-head .kind li i{ margin-right:0.1rem; font-weight:bold; font-size:0.7rem; }
#communication .content-personal .content-head .kind li.blue.active{ color:#3aa7e9; }
#communication .content-personal .content-head .kind li.brown.active{ color:#cbb598; }
#communication .content-personal .content-head .kind li.red.active{ color:#f0545a; }
#communication .content-personal .content-head .kind li.yellow.active{ color:#fbc791; }
#communication .content-personal .content-head .select{ margin-right:0.4rem; }
#communication .content-personal .content-head .select a{ color:#fff; background-color:#db4b40; display:inline-block; height:1rem; line-height:1rem; width:2rem; text-align:center; font-size:0.65rem; border-radius:0.15rem; }
#communication .content-personal .content-head .select .drop-down{ position:absolute; right:0.5rem; top:2.3rem; text-align:center; width:3.5rem; border:1px solid #ececec; border-radius:0.2rem; background-color:#fff; display:none; z-index:100; }
#communication .content-personal .content-head .select .drop-down ul{ background-color:#fff; border-radius:10px; }
#communication .content-personal .content-head .select .drop-down ul:after{ position:absolute; right:0.5rem; top:-0.2rem; content:''; width:0.3rem; height:0.3rem; background:#fff; border-left:1px solid #ececec; border-top:1px solid #ececec; transform:rotate(45deg); }
#communication .content-personal .content-head .select .drop-down ul li{ border-bottom:1px solid #e8e8e8; height:1.4rem; line-height:1.4rem; color:#666; font-size:0.7rem; }
#communication .content-personal .content-head .select .drop-down ul li:last-child{ border:none; }
#communication .content-personal .main{ background-color:#fff; width:99%; overflow:hidden; padding-left:1%; border-radius:0 0 0.45rem 0.45rem; height:20rem; overflow-y:scroll; }
#communication .content-personal .main li.box{ float:left; margin:1% 1% 0 0; width:32.3%; height:4.6rem; text-align:center; color:#fff; position:relative; }
#communication .content-personal .main li.blue{ background-color:#3aa7e9; }
#communication .content-personal .main li.brown{ background-color:#cbb598; }
#communication .content-personal .main li.red{ background-color:#f0545a; }
#communication .content-personal .main li.yellow{ background-color:#fab973; }
#communication .content-personal .main li .img-box{ display:inline-block; border-radius:50%; overflow:hidden; width:50%; height:50%; margin-top:0.3rem; }
#communication .content-personal .main li .img-box img{ width:100%; height:100%; display:block; }
#communication .content-personal .main li p{ height:1rem; line-height:1rem; font-size:0.5rem; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#communication .content-personal .main li .icon-list i{ margin-right:0.2rem; font-size:0.6rem; }
#communication .content-personal .main li .icon-list i:last-child{ margin:0; }
#communication .content-personal .main li .triangle{ position:absolute; left:0; top:0; opacity:0.5; width:0; height:0; border-width:1.5rem 1.5rem 0 0; border-style:solid; border-color:#fff transparent transparent transparent; }
#communication .content-personal .main li .num{ position:absolute; left:0.1rem; top:0.05rem; font-size:0.6rem; }
#communication .content-personal .main li .select{ position:absolute; right:0.1rem; top:0.1rem; }
#communication .content-personal .main li .select input{ display:none; }
#communication .content-personal .main li .select input + label { border:1px solid #fff; padding:0.35rem; border-radius:50%; display:inline-block; position:relative; }
#communication .content-personal .main li .select input:checked + label:after { content:'\2714'; position:absolute; top:-4px; left:0; color:#fff; width:100%; text-align:center; font-size:2.2em; padding-top:1px; vertical-align:text-top; }
#communication .layer-box .layui-m-layercont{ padding:0; line-height:normal; }
#communication .layer-box .layer-box-container{ border:1px solid #fff; text-align:center; width:10.5rem; height:13rem; color:#fff; }
#communication .layer-box .layer-box-container.blue{ background-color:#3aa7e9; }
#communication .layer-box .layer-box-container.brown{ background-color:#cbb598; }
#communication .layer-box .layer-box-container.red{ background-color:#f0545a; }
#communication .layer-box .layer-box-container.yellow{ background-color:#fab973; }
#communication .layer-box .layer-box-container .img-box{ display:inline-block; border-radius:50%; overflow:hidden; width:5.2rem; height:5.2rem; margin-top:1rem; }
#communication .layer-box .layer-box-container .img-box img{ width:100%; height:100%; display:block; }
#communication .layer-box .layer-box-container p{ height:2.4rem; line-height:2.4rem; font-size:1rem; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#communication .layer-box .layer-box-container ul{ overflow:hidden; padding-left:4%; }
#communication .layer-box .layer-box-container li{ float:left; border:1px solid #fff; width:45.5%; margin-right:3%; margin-bottom:0.3rem; height:1.2rem; line-height:1.2rem; border-radius:0.15rem; }
#communication .layer-box .layer-box-container li.right{ margin-right:4%; }
#communication .layer-box .layer-box-container li i{ font-size:1rem; float:left; margin-left:8%; width:22%; }
#communication .layer-box .layer-box-container li span{ float:left; width:70%; text-align:center; }
#communication .layer-box .layer-box-container .triangle{ position:absolute; left:1px; top:1px; opacity:0.5; width:0; height:0; border-width:3.4rem 3.4rem 0 0; border-style:solid; border-color:#fff transparent transparent transparent; }
#communication .layer-box .layer-box-container .num{ position:absolute; left:0.2rem; top:0.2rem; font-size:1.5rem; }

#communication .content .list-box-container .plus{ position:absolute; left:42.5%; bottom:-1.35rem; text-align:center; width:2.7rem; height:2.7rem; line-height:2.7rem; border-radius:50%; background-color:#fff; box-shadow:0 0 1px 2px #eee; -webkit-box-shadow:0 0 1px 2px #eee;}
#communication .content .list-box-container .plus i { font-size:1.3rem; color: #db4b40; font-weight: bold; }

#add-friends{ background-color:#ededf1; }
#add-friends .container{ padding:0; }
#add-friends .container .head{ background-color:#313135; }
#add-friends .container .head div{ position:absolute; left:0.5rem; font-size:0.6rem; }
#add-friends .container .head div i{ position:static; }
#add-friends .container .head a{ position:absolute; color:#fff; right:0.6rem; font-size:0.6rem; }
#add-friends .content-container input{ outline:none; border:none; width:94%; margin:2% 3%; font-size:0.6rem; padding:0.2rem 0; border-radius:0.15rem; text-align:center; background:#fff url("../images/search.png") no-repeat 30%; }
#add-friends .content-container .btn-bar{ background-color:#fff; overflow:hidden; padding:0.5rem; }
#add-friends .content-container .btn-bar div{ float:left; width:50%; font-size:0.6rem; text-align:center; }
#add-friends .content-container .btn-bar div i{ display:block; color:#1ea627; font-size: 1rem; margin-bottom:0.2rem; }
#add-friends .content-container .btn-bar div a{ font-size:0.5rem; color:#ababab; }
#add-friends .content-container .content-list{ margin-top:0.8rem; }
#add-friends .content-container .content-list li{ overflow:hidden; font-size:0.6rem; background-color:#fff; padding:0.3rem 0.4rem; border-bottom:1px solid #eee; }
#add-friends .content-container .content-list li img{ float:left; width:1.2rem; height:1.2rem; }
#add-friends .content-container .content-list li .box{ float:left; margin-top:-0.1rem; margin-left:0.3rem; }
#add-friends .content-container .content-list li p{ font-size:0.58rem; color:#999; }
#add-friends .content-container .content-list li .operation{ float:right; width:2rem; text-align:center; height:1rem; line-height:1rem; border-radius:0.1rem; background-color:#f1f1f1; margin-top:0.25rem; }
#add-friends .content-container .content-list li .operation.active{ color:#999; background-color:#fff; }

.select-box div{ padding:0.5rem; }
.select-box li{ float:left; width:50%; font-size:1rem; height:3rem; line-height:3rem; }
.select-box li i{ font-size:1rem; margin-right:0.5rem; }